<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>铂涛</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"> 
</head>
<body>
    <!-- 页头 -->
    <header>
        <nav>
            <div>
                <p>MENU</p>
                <img src="./img/nav-menu.png" alt="">
            </div>
            <div><img src="./img/logo.png" alt=""></div>
            <div>
                <p>ENG</p>
            </div>
        </nav>
        <!-- 轮播 -->
        <div class="swiper-container top-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/nav_swiper_01.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/nav_swiper_01.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/nav_swiper_01.jpg" alt="">
                </div>
            </div>
            <!-- 自定义分页器 -->
            <!-- <div class="my-pagination">
                <div><img src="./img/page-left.png" alt=""></div>
                <div><img src="./img/page-right.png" alt=""></div>
            </div>   -->
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev">
            </div>
            <div class="swiper-button-next">
            </div>
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </header>
    <!-- 立刻预定 -->
    <div class="reserve">
        <div>
            <div>
                <h2>立即预定</h2>
                <h6>感受美好体验</h6>
                <p>从5000家门店挑选你最心仪的</p>
            </div>
        </div>
        <div class="search">
            <ul>
                <li>
                    <div>目的地</div>
                    <input type="text" placeholder="广州">
                </li>
                <li>
                    <div>入住日期</div>
                    <input type="text" placeholder="广州">
                </li>
                <li>
                    <div>离店日期</div>
                    <input type="text" placeholder="广州">
                </li>
            </ul>
            <div>
                <input type="button" name="" id="" value="搜索">
            </div>
        </div>
    </div>
    <!-- 集团信息 -->
    <div class="group-info">
        <!-- 第一个线条盒子 -->
		<div class="line-box01">
			<div>
                <div class="mask"><img src="./img/line_1.png" alt=""></div>
			</div>
			<div>
                <div class="mask"><img src="./img/line_2.png" alt=""></div>
			</div>
			<div>
                <div class="mask"><img src="./img/line_3.png" alt=""></div>
			</div>
			<div>
                <div class="mask"><img src="./img/line_4.png" alt=""></div>
			</div>
		</div>
        <!-- 顶部图片 -->
        <div class="group-top">
            <img src="./img/group_01.jpg" alt="">
        </div>
        <!-- 集团主要信息 -->
        <div class="group-content">
            <div class="group-con-01">
                <div></div>
                <div></div>
                <div></div>
                <div>
                    <div class="group-con-title">
                        <h3>非繁·城品酒店</h3>
                        <h3>(Chonpines Hotel)</h3>
                    </div>
                    <div class="group-con-des">
                        <p>不繁不简 城意之选</p>
                        <p>非繁·城品酒店 · 铂涛集团旗下终端城市商旅酒店品牌。针对带有一定城市印记与特色的终端在营酒店，通过输出轻改造...</p>
                    </div>
                    <div class="group-con-btn">
                        <a href="">了解更多</a>
                    </div>
                </div>
                <div></div>
                <div></div>
            </div>
            <div class="group-con-02">
                <div class="swiper-container normal-container">
                    <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                            </div>
                            <div class="swiper-slide">
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                                <div>
                                    <div class="group-con-title">
                                        <h3>希尔顿欢朋酒店</h3>
                                        <h3>(Hampton by Hilton)</h3>
                                    </div>
                                    <div class="group-con-des">
                                        <p>我们服务你的期待</p>
                                        <p>希尔顿欢朋是希尔顿全球旗下最大的连锁酒店品牌，创立于1984年，目前在美洲与欧洲共开设超过2000家酒店，是...</p>
                                    </div>
                                    <div class="group-con-btn">
                                        <a href="">了解详情</a>
                                    </div>
                                </div>
                                <div></div>
                            </div>
                        </div>
                        
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev">
                        </div>
                        <div class="swiper-button-next">
                        </div>
                    </div>
                    <!-- 两个漂浮 -->
                    <div class="flotage-l">
                        <img src="./img/group_con_07.png" alt="">
                    </div>
                    <div class="flotage-r">
                        <img src="./img/group_con_08.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <!-- 第二个线条盒子 -->
    <div class="line-box02">
        <div>
            <div class="mask"><img src="./img/line_5.png" alt=""></div>
        </div>
    </div>
    <!-- 集团愿景 -->
    <div class="group-vision">
        <div class="vision-left">
            <img src="./img/vision_left.png" alt="">
        </div>
        <div class="vision-right">
            <div class="vision-r-top">
                <h2>中国富有创新影响力的企业之一</h2>
                <p>专注体验消费领域,在中国酒店业首倡"品牌先行"理念,基于消费者的价值诉求、内心喜好来打造及运营品牌。</p>
                <p>铂涛以"连接美好体验"为恩景,通过创建、投资、合作等形式,连接酒店、公寓、咖啡、共享办公、艺术公益平台等领域中具有独特调性的品牌·为消费者构建一个丰富多彩的体验生活圈。目前,铂涛体验生活圈涵盖了超20个品牌·会员人数超1亿.</p>
                <p>门店总数超5000家·覆盖全国450多个城市,并积极扩张至东南亚、欧洲、非洲等海外市场。</p>
                <p>2015年9月18日·铂涛与锦江强强组合,成为首家跻身全球前五的中国酒店集团。</p>
            </div>
            <div class="vision-r-mid">
                <h2>企业愿景：连接美好体验</h2>
                <p>聚焦体验消费领域创新,创建具有价值共鸣的多元化品牌,为消费者创造美好的生活体验。</p>
            </div>
            <div class="vision-r-bto">
                <!-- 蓝色衬条 -->
                <div class="blueBox"></div>
                <!-- 人物列表 -->
                <div class="swiper-container people-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <ul class="people-list">
                                <li>
                                    <div>
                                        <img src="./img/people_01.jpg" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                                <li>
                                    <div>
                                        <img src="./img/people_02.jpg" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                                <li>
                                    <div>
                                        <img src="./img/people_03.png" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                                <li>
                                    <div>
                                        <img src="./img/people_04.png" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                                <li>
                                    <div>
                                        <img src="./img/people_05.png" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="people-list">
                                <li>
                                    <div>
                                        <img src="./img/people_01.jpg" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                                <li>
                                    <div>
                                        <img src="./img/people_02.jpg" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                                <li>
                                    <div>
                                        <img src="./img/people_03.png" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                                <li>
                                    <div>
                                        <img src="./img/people_04.png" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                                <li>
                                    <div>
                                        <img src="./img/people_05.png" alt="">
                                    </div>
                                    <h3>郑南燕先生</h3>
                                    <p>郑南雁先生帕涛集团创始人、首席品牌建构师、CEO 2005年,创办7天连锁酒店,任CEO.2013年,组建铂寿集团.完成对7天连锁酒店私有化收购,并陆续推出多个体验型品牌</p>
                                    <p>中国酒店业最佳创新人物</p>
                                    <p>广东商业三十年-优秀人物</p>
                                    <p>广东+大经济风云人物</p>
                                    <p>中国十大新锐创业领袖</p>
                                    <p>中国饭店业十大影响力人物</p>
                                    <p>中国商业最具创意人物</p>
                                    <p>中国酒店业杰出企业家奖</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    
                    <!-- 如果需要导航按钮 -->
                    <!-- <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div> -->
                    
                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>
            </div>
        </div>
    </div>
    <!-- 第三个线条盒子 -->
    <div class="line-box03">
        <div>
            <div class="mask"><img src="./img/line_6.png" alt=""></div>
        </div>
        <div>
            <div class="mask"><img src="./img/line_7.png" alt=""></div>
        </div>
        <div>
            <div class="mask"><img src="./img/line_8.png" alt=""></div>
        </div>
    </div>
    <!-- 加盟 -->
    <div class="join">
        <!-- 加盟轮播 -->
        <div class="swiper-container normal-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/join_wrap_01.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
        <!-- 加盟详情 -->
        <div class="jion-detail">
            <img src="./img/jion_footer.jpg" alt="">
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script>        
    
    var topSwiper = new Swiper ('.top-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            
            // 如果需要分页器
            // pagination: {
            // el: '.swiper-pagination',
            // },
            
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            
            // 如果需要滚动条
            // scrollbar: {
            //     el: '.swiper-scrollbar',
            // },
        });
        var mySwiper02 = new Swiper ('.normal-container', {
            // direction: 'vertical', // 垂直切换选项
            // effect:"flip",
            loop: true, // 循环模式选项
            
            // 如果需要分页器
            // pagination: {
            // el: '.swiper-pagination',
            // },
            
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.normal-container .swiper-button-next',
                prevEl: '.normal-container .swiper-button-prev',
            },
            
            // 如果需要滚动条
            // scrollbar: {
            //     el: '.swiper-scrollbar',
            // },
        });

        let changeBlue = (function(){
            let blueBox = document.querySelector(".blueBox"),
                kg = 0;
                return function(){
                    kg = !kg;
                    kg==true?blueBox.classList.add("actBlue"):blueBox.classList.remove("actBlue");
                }
        }());

        var peopleSwiper = new Swiper ('.people-swiper', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 3000,//1秒切换一次
            },
             pagination: {
                el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.people-swiper .swiper-button-next',
                prevEl: '.people-swiper .swiper-button-prev',
            },
            on: {
                slideChangeTransitionStart: function () {
                    changeBlue();
                },
            },
        });
    </script>
    <script src="./js/index.js"></script>
</body>
</html>